<template>
            <div class="codemirror mysqlcode" >
                <!-- codemirror -->
                <codemirror v-model="code" :options="cmOption"  ></codemirror>
            </div>
</template>
<script>
    // language
    import 'codemirror/mode/sql/sql.js'
    import 'codemirror/addon/hint/show-hint.js'
    import 'codemirror/addon/hint/sql-hint.js'
    // theme css
    import 'codemirror/theme/rubyblue.css'
    export default {
        data() {
            const code = ""

            return {
                code,
                cmOption: {
                    tabSize: 4,
                    styleActiveLine: true,
                    lineNumbers: true,
                    extraKeys: {"Tab": "autocomplete"},
                    line: true,
                    mode: 'text/x-mysql',
                    theme: 'rubyblue',
                    matchBrackets: true,
                    autoCloseBrackets: true,
                }
            }
        }
    }
</script>

<style>
    .mysqlcode  .CodeMirror {
        border: 2px solid green;
        height: 350px !important;
    }
</style>
